<template>
	<view class="setting">
		<u-navbar
			back-text="个人中心"
			:background="{
				background: 'transparent'
			}"
		></u-navbar>
		<view class="cellbox">
			<u-cell-group>
				<u-cell-item title="头像" :arrow="false" :index="1" @click="cellchange">
					<view class="" slot="right-icon"><u-avatar :src="userinfo.img" mode="circle" :size="80"></u-avatar></view>
				</u-cell-item>
				<u-cell-item title="昵称" :value="userinfo.user" :arrow="false" :index="2" @click="cellchange"></u-cell-item>
				<u-cell-item title="手机号" :arrow="true" :value="userinfo.phone" :index="3" @click="cellchange"></u-cell-item>
				<u-cell-item title="用户ID" :arrow="false" :value="userinfo.id" :index="4" @click="cellchange"></u-cell-item>
				<u-cell-item title="支付宝账号" :arrow="true" :value="userinfo.alipay_account" :index="5" @click="cellchange"></u-cell-item>
				<u-cell-item title="更多设置" :arrow="true" :index="6" @click="cellchange"></u-cell-item>
			</u-cell-group>
		</view>
		<view class="btnbox" style="margin: 0 20rpx;">
			<u-button style="color: #919192;background-color: #E9E9E9;border: none;" :hair-line="false" @click="show = true">退 出 登 录</u-button>
		</view>
		<u-modal v-model="show" content="您确定要退出登录？" :show-cancel-button="true" @confirm="dologinout"></u-modal>
	</view>
</template>

<script>
export default {
	name: 'setting',
	data() {
		return {
			userinfo: {
				img: uni.getStorageSync('jxuser').img ? uni.getStorageSync('jxuser').img : '',
				user: uni.getStorageSync('jxuser').user ? uni.getStorageSync('jxuser').user : '',
				my_code: uni.getStorageSync('jxuser').my_code ? uni.getStorageSync('jxuser').my_code : '',
				phone: uni.getStorageSync('jxuser').phone ? uni.getStorageSync('jxuser').phone : '',
				alipay_account: uni.getStorageSync('jxuser').alipay_account ? uni.getStorageSync('jxuser').alipay_account : '未绑定支付宝',
				level: uni.getStorageSync('jxuser').level ? uni.getStorageSync('jxuser').level : '',
				id: uni.getStorageSync('jxuser').id ? uni.getStorageSync('jxuser').id : ''
			},
			show: false
		};
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
		console.log('refresh');
		setTimeout(function() {
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {
		this.alipay_account = uni.getStorageSync('jxuser').alipay_account ? uni.getStorageSync('jxuser').alipay_account : '未绑定支付宝';
		this.phone = uni.getStorageSync('jxuser').phone ? uni.getStorageSync('jxuser').phone : '';
	},
	//前台进入后台
	onHide() {},
	methods: {
		cellchange(index) {
			console.log(index);
			switch (index) {
				case 3:
					uni.navigateTo({
						url: '/pages/center/setting/setPhone',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 5:
					uni.navigateTo({
						url: '/pages/center/setting/setAlipay',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
				case 6:
					uni.navigateTo({
						url: '/pages/center/setting/setMore',
						animationType: 'pop-in',
						animationDuration: 300
					});
					break;
			}
		},
		dologinout() {
			console.log('退出登录');
			uni.clearStorage();
			// uni.setStorageSync('isloginout', false)
			uni.switchTab({
				url: '/pages/home/index'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.setting {
	.cellbox {
		margin: 12rpx 20rpx 44rpx;
		border-radius: 12rpx;
		overflow: hidden;
		box-shadow: 0px 4rpx 12rpx 0px rgba(0, 0, 0, 0.09);
	}
	.btnbox {
		/deep/.u-hairline-border:after {
			border: none !important;
		}
		/deep/.u-btn--default {
			border-color: transparent !important;
			background-color: #e9e9e9;
			color: #919192;
		}
	}
}
</style>
